<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <title>gulimall注册页面</title>
    <script src="/static/register/libs/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/register/js/jQuery/jquery-3.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/register/bootStrap/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/static/register/sass/index.css"/>
    <link rel="stylesheet" type="text/css" href="/static/register/css/index.css">
</head>

<body>

<!-- 谷粒商城隐私协议 -->

<header>
	<a href="/static/register/https://www.jd.com/index.html?cu=true&utm_source=haosou-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_haosoupinzhuan&utm_term=0a875d61c5fe47d8bc48679132932d23_0_2702c6f4ae1c4cd191c1ee4398e2e21b"
	   class="logo"><img src="/static/register/img/logo1.jpg" alt=""></a>
	<div class="desc">欢迎注册</div>
	<div class="dfg">
		<span>已有账号？</span>
		<a href="http://auth.gulimall.com/login.html">请登录</a>
	</div>
</header>
<section>
	<form action="/register" method="post" class="one">
		<div class="register-box">
			<div class="tips" style="color: red"
				 th:text="${errors!=null?(#maps.containsKey(errors, 'msg')?errors.msg:''):''}">

			</div>
			<label class="username_label">用 户 名
				<input name="username" maxlength="20" type="text" placeholder="您的用户名和登录名">
			</label>
			<div class="tips" style="color: red"
				 th:text="${errors!=null?(#maps.containsKey(errors, 'username')?errors.username:''):''}">

			</div>
		</div>
		<div class="register-box">
			<label class="other_label">设 置 密 码
				<input name="password" maxlength="20" type="password" placeholder="建议至少使用两种字符组合">
			</label>
			<div class="tips" style="color: red"
				 th:text="${errors!=null?(#maps.containsKey(errors, 'password')?errors.password:''):''}">

			</div>
		</div>
		<div class="register-box">
			<label class="other_label">确 认 密 码
				<input maxlength="20" type="password" placeholder="请再次输入密码">
			</label>
			<div class="tips">

			</div>
		</div>
		<div class="register-box">
			<label class="other_label">
				<span>中国 0086∨</span>
				<input name="phone" class="phone" maxlength="20" type="text" placeholder="建议使用常用手机">
			</label>
			<div class="tips" style="color: red"
				 th:text="${errors!=null?(#maps.containsKey(errors, 'phone')?errors.phone:''):''}">

			</div>
		</div>
		<div class="register-box">
			<label class="other_label">验 证 码
				<input name="code" maxlength="20" type="text" placeholder="请输入验证码" class="caa">
			</label>
			<a href="javascript:;" id="sendCode"> 发送验证码 </a>
		</div>
		<div class="arguement">
			<input type="checkbox" id="xieyi"> 阅读并同意
			<a href="/static/register/javascript:;">《谷粒商城用户注册协议》</a>
			<a href="/static/register/javascript:;">《隐私政策》</a>
			<div class="tips" style="color: red"
				 th:text="${errors!=null?(#maps.containsKey(errors, 'code')?errors.code:''):''}">

			</div>
			<br/>
			<div class="submit_btn">
				<button type="submit" id="submit_btn">立 即 注 册</button>
			</div>
		</div>
	</form>

	<div class="two">
		<div class="right_r">
			<div class="right_r1">
				<img src="/static/register/img/a65a18e877a16246a92e1b755bd88a03_03.png"/>
				<span>企业用户注册</span>
			</div>
			<div class="right_r2">
				<img src="/static/register/img/a65a18e877a16246a92e1b755bd88a03_06.png"/>
				<span>INTERNATIONAL <br/> CUSTOMERS</span>
			</div>
		</div>
	</div>
</section>
<br/><br/>
<hr>
<div class="footer">
	<ul>
		<li>
			<a href="/static/register/">关于我们</a>
		</li>
		<li>|</li>
		<li>
			<a href="/static/register/">联系我们</a>
		</li>
		<li>|</li>
		<li>
			<a href="/static/register/">人次招聘</a>
		</li>
		<li>|</li>
		<li>
			<a href="/static/register/">商家入驻</a>
		</li>
		<li>|</li>
		<li>
			<a href="/static/register/">广告服务</a>
		</li>
		<li>|</li>
		<li>
			<a href="/static/register/">手机谷粒商城</a>
		</li>
		<li>|</li>
		<li>
			<a href="/static/register/">友情链接</a>
		</li>
		<li>|</li>
		<li>
			<a href="/static/register/">销售联盟</a>
		</li>
		<li>|</li>
		<li>
			<a href="/static/register/">谷粒商城社区</a>
		</li>
		<li>|</li>
		<li>
			<a href="/static/register/">谷粒商城公益</a>
		</li>
		<li>|</li>
		<li>
			<a href="/static/register/">English Site</a>
		</li>
	</ul>
</div>
<p class="bq">Copyright©2004-2016 谷粒商城gulimall.com 版权所有</p>
<br/><br/>
<script type="text/javascript" charset="utf-8">
	$(function () {
		var stuList = getStuList(); //设置传送信息：学生的集合

		//聚焦失焦input
		$('input').eq(0).focus(function () {
			if ($(this).val().length == 0) {
				$(this).parent().next("div").text("支持中文，字母，数字，'-'，'_'的多种组合");
			}
		})
		$('input').eq(1).focus(function () {
			if ($(this).val().length == 0) {
				$(this).parent().next("div").text("建议使用字母、数字和符号两种以上的组合，6-20个字符");
			}
		})
		$('input').eq(2).focus(function () {
			if ($(this).val().length == 0) {
				$(this).parent().next("div").text("请再次输入密码");
			}
		})
		$('input').eq(3).focus(function () {
			if ($(this).val().length == 0) {
				$(this).parent().next("div").text("验证完后，你可以使用该手机登陆和找回密码");
			}
		})
		$('input').eq(4).focus(function () {
			if ($(this).val().length == 0) {
				$(this).parent().next().next("div").text("看不清？点击图片更换验证码");
			}
		})
		//input各种判断
		//用户名：
		$('input').eq(0).blur(function () {
			if ($(this).val().length == 0) {
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color", '#ccc');
			} else if ($(this).val().length > 0 && $(this).val().length < 4) {
				$(this).parent().next("div").text("长度只能在4-20个字符之间");
				$(this).parent().next("div").css("color", 'red');
			} else if ($(this).val().length >= 4 && !isNaN($(this).val())) {
				$(this).parent().next("div").text("用户名不能为纯数字");
				$(this).parent().next("div").css("color", 'red');
			} else {
				for (var m = 0; m < stuList.length; m++) {
					if ($(this).val() == stuList[m].name) {
						$(this).parent().next("div").text("该用户名已被注册");
						$(this).parent().next("div").css("color", 'red');
						return;
					}
				}
				$(this).parent().next("div").text("");
			}
		})
		//密码
		$('input').eq(1).blur(function () {
			if ($(this).val().length == 0) {
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color", '#ccc');
			} else if ($(this).val().length > 0 && $(this).val().length < 6) {
				$(this).parent().next("div").text("长度只能在6-20个字符之间");
				$(this).parent().next("div").css("color", 'red');
			} else {
				$(this).parent().next("div").text("");
			}
		})
		//	确认密码
		$('input').eq(2).blur(function () {
			if ($(this).val().length == 0) {
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color", '#ccc');
			} else if ($(this).val() != $('input').eq(1).val()) {
				$(this).parent().next("div").text("两次密码不匹配");
				$(this).parent().next("div").css("color", 'red');
			} else {
				$(this).parent().next("div").text("");
			}
		})
		//	手机号
		$('input').eq(3).blur(function () {
			if ($(this).val().length == 0) {
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color", '#ccc');
			} else if ($(this).val().substr(0, 3) != 138 && $(this).val().substr(0, 3) != 189 && $(this).val().substr(0, 3) != 139 && $(this).val().substr(0, 3) != 158 && $(this).val().substr(0, 3) != 188 && $(this).val().substr(0, 3) != 157 || $(this).val().length != 11) {
				$(this).parent().next("div").text("手机号格式不正确");
				$(this).parent().next("div").css("color", 'red');
			} else {
				$(this).parent().next("div").text("");
			}
		})
		// 	验证码
		//	 验证码刷新
		function code() {
			var str = "qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPLKJHGFDSAZXCVBNM";
			var str1 = 0;
			for (var i = 0; i < 4; i++) {
				str1 += str.charAt(Math.floor(Math.random() * 62))
			}
			str1 = str1.substring(1)
			$("#code").text(str1);
		}

		code();
		$("#code").click(code);
		//	验证码验证
		$('input').eq(4).blur(function () {
			if ($(this).val().length == 0) {
				$(this).parent().next().next("div").text("");
				$(this).parent().next().next("div").css("color", '#ccc');
			} else if ($(this).val().toUpperCase() != $("#code").text().toUpperCase()) {
				$(this).parent().next().next("div").text("验证码不正确");
				$(this).parent().next().next("div").css("color", 'red');
			} else {
				$(this).parent().next().next("div").text("");
			}
		})
		//	提交按钮
		/*$("#submit_btn").click(function (e) {
			for (var j = 0; j < 5; j++) {
				if ($('input').eq(j).val().length == 0) {
					$('input').eq(j).focus();
					if (j == 4) {
						$('input').eq(j).parent().next().next("div").text("此处不能为空");
						$('input').eq(j).parent().next().next("div").css("color", 'red');
						e.preventDefault();
						return;
					}
					$('input').eq(j).parent().next(".tips").text("此处不能为空");
					$('input').eq(j).parent().next(".tips").css("color", 'red');
					e.preventDefault();
					return;
				}
			}
			//协议
			if ($("#xieyi")[0].checked) {
				//向变量stuList数组添加一个数值，数值内部格式Student(name,password,tel,id)
				//发送用户信息
				stuList.push(new Student($('input').eq(0).val(), $('input').eq(1).val(), $('input').eq(3).val(), stuList.length + 1));
				localStorage.setItem('stuList', JSON.stringify(stuList));
				alert("注册成功");
				window.open("userlist.html", "_blank");
			} else {
				$("#xieyi").next().next().next(".tips").text("请勾选协议");
				$("#xieyi").next().next().next(".tips").css("color", 'red');
				e.preventDefault();
				return;
			}
		})*/

		//  建立构造函数，构造学生信息模板
		function Student(name, password, tel, id) {
			this.name = name;
			this.password = password;
			this.tel = tel;
			this.id = id;
		}

		//	获取之前所有已经注册的用户集合
		function getStuList() {
			var list = localStorage.getItem('stuList');
			if (list != null) {
				return JSON.parse(list);
			} else {
				return new Array();
			}
		}
	})
	$(".ty").click(function () {
		$(".zong").hide();
		$(".laoda").hide();
	});
	$(".cuo").click(function () {
		$(".zong").hide();
	});


	$(function () {
		//  获取手机验证码
		$("#sendCode").click(function () {
			//1、给指定手机号发送验证码

			//2、进入倒计时效果
			if ($(this).hasClass("disabled")) {
				//正在倒计时

			} else {
				timeoutChangeStyle();
			}
		})
	})

	let num = 60;

	function timeoutChangeStyle() {
		$("#sendCode").attr("class", "disabled")
		if (num == 0) {
			$("#sendCode").text("发送验证码")
			num = 61;
			$("#sendCode").attr("class", "")
		} else {
			let str = num + "s后再次发送";
			$("#sendCode").text(str);
			setTimeout("timeoutChangeStyle()", 1000);
		}
		num--;
	}


</script>
</body>

</html>
